<template>
  <view class="kanban-settings">
    <view class="kanban-settings-con">
      <view class="kanban-settings-item">
        <view class="kanban-settings-item-title"><text>请选择管理员</text></view>
        <view class="settings-item">
          <view
            class="settings-item-btn"
            @click="gotoSettings"
          >
            <img
              src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01ZSZEPi1S9wNvq9Mpu_!!1034622205.png"
              alt=""
            />
            <text>添加管理员</text>
          </view>
          <view class="settings-item-list">
            <view class="list-btn">
              <view class="list-btn-left">
                <text>已添加({{ taskPermissionList.length }})</text>
              </view>
              <view
                class="list-btn-right"
                @click="allClear"
              >
                全部清空
              </view>
            </view>
            <view class="list-item-container">
              <view
                class="list-item"
                v-for="(item, index) in taskPermissionList"
                :key="index"
              >
                <view class="list-item-box">
                  <view class="list-item-left">
                    <img
                      :src="item.avatarUrl"
                      alt=""
                    />
                    <view class="list-item-left-text">
                      <text>{{ item.nickName }}</text>
                      <text>/ 技术部</text>
                    </view>
                  </view>
                  <view
                    class="list-item-right"
                    @click="delClear(item)"
                  >
                    <i class="iconfont icon-lajitong"></i>
                  </view>
                </view>
                <view class="management-scope">
                  <text>管理范围：{{ item.deptNames }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { onMounted, ref } from "vue";
import { getTaskPermissionList, delTaskPermission } from "@/api/index";
const taskPermissionList = ref([]);
const gotoSettings = () => {
  Taro.navigateTo({
    url: "/packageA/pages/kanbanSettings/addSettings/index",
  });
};
onMounted(() => {
  handleTaskPermissionList();
});
const handleTaskPermissionList = () => {
  let params = {
    userId: Taro.getStorageSync("user").userId,
  };
  getTaskPermissionList(params).then(res => {
    taskPermissionList.value = res.rows;
  });
};
// 删除
const delClear = item => {
  Taro.showModal({
    title: "提示",
    content: "确定要删除吗？",
    success: function (res) {
      if (res.confirm) {
        console.log("用户点击确定");
        delTaskPermission(item.userId).then(res => {
          Taro.showToast({
            title: "删除成功",
            icon: "success",
            duration: 2000,
          });
          handleTaskPermissionList();
        });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
</script>

<style lang="less">
@import url("./index.less");
</style>
